<template>
    <header>
        <van-search placeholder="请输入搜索关键词" input-align="center" @click="goToSearch" />
    </header>
    <main>
        <van-tabs v-model:active="active" :scrollspy="false">
            <van-tab v-for="i in topBarArr.arr" :title="i.type">
                <div class="wrap">
                    <EssayList class="content-wrap" @click="goTO(i.id)" v-for="i in essayData.arr" :i="i" />
                </div>
            </van-tab>
        </van-tabs>
    </main>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, defineComponent } from "vue";
import axios from "axios";
import { topBar, getEssayAll, getEssayClassify } from "../api/api";
import { useRouter } from "vue-router";
import EssayList from "@/components/EssayList.vue";
// 组件
defineComponent({ EssayList });
let router = useRouter();
// 高亮
let active = ref(0);
// 头部分类数据
let topBarArr = reactive({ arr: [] as { type: string }[] });
// 文章数据
let essayData = reactive({ arr: [] as { pic: any; title: any; author: any; t: any; likes: any; collect: any; views: any; id: any }[] });
// 获取头部分类
let topBarApi = () => {
    axios(topBar()).then(({ data }) => {
        topBarArr.arr = data.data;
    });
};
topBarApi();
// 获取全部文章数据
let essayAllApi = (type: any) => {
    axios(getEssayAll(type)).then(({ data }) => {
        essayData.arr = data.data;
    });
};
// 获取分类文章数据
essayAllApi("t");
let essayClassifyApi = (num: any) => {
    axios(getEssayClassify(num)).then(({ data }) => {
        essayData.arr = data.data;
    });
};
// 监听当前分类
watch(active, (n, o) => {
    if (n != o) {
        if (n == 0) {
            essayAllApi("t");
        } else if (n == 1) {
            essayAllApi("views");
        } else {
            essayClassifyApi(n);
        }
    }
});
// 进入内容详细
let goTO = (id: any) => {
    router.push({ name: "articleDetails", query: { id } });
};
let goToSearch = () => {
    router.push({ name: "search" });
};
</script>

<style lang="scss" scoped>
main {
    background-color: #f8f8f8;
    min-height: 85vh;
    .wrap {
        padding: 0 3vw 55px;
        .content-wrap {
            margin-top: 10px;
            border-radius: 10px;
            background-color: #fff;
            padding: 10px;
            box-sizing: border-box;
            width: 100%;
            height: 100px;
            display: flex;
        }
    }
}
</style>
